<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="16" class="header-col-left">
            <div class="grid-content bg-purple">
              华铁铁路职业技能鉴定后台系统
            </div>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-dropdown @command="dropdownCommand">
              <el-icon size="30" style="margin-right: 5px; margin-top: 15px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="info">{{
                    userName
                  }}</el-dropdown-item>
                  <el-dropdown-item command="quit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']" @select="handleSelect">
            <el-menu-item index="1" route="${userName}">
              <template #title>
                <el-icon><list /></el-icon>练习题管理
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <template #title>
                <el-icon><document /></el-icon>模拟题管理
              </template>
            </el-menu-item>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><User /></el-icon>人员管理
              </template>
              <el-menu-item index="3-1">后台管理员信息</el-menu-item>
              <el-menu-item index="3-2">用户信息</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
  background-color: #d0e5fa;
  color: var(--el-text-color-primary);
  line-height: 30px;
}

.el-aside {
  color: var(--el-text-color-primary);
}
.header-col-left {
  text-align: start;
  margin-top: 5px;
  font-size: 30px;
  color: #303133;
  font: 2em sans-serif;
}
</style>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Document, Setting, User, List } from "@element-plus/icons";
import { ElMessage } from "element-plus";
import LocalData from "../dataGain/LocalData";
export default defineComponent({
  components: {
    Setting,
    User,
    List,
    Document,
  },
  data() {
    return {
      userName: this.$route.params.username,
    };
  },
  methods: {
    dropdownCommand(command) {
      switch (command) {
        case "info":
          this.$message(`点击了info ` + this.userName);
          var url = "/option/" + this.userName + "/personal";
          this.$router.push(url);
          break;
        case "quit":
          this.$router.push("/");
          break;
      }
    },
    handleSelect(key: string, keyPath: string) {
      var page:string;
      switch (key) {
        case "1":
          page = "exercises"
          break;
        case "2":
          page = "simulation";
          break;
        case "3-1":
          page = "administrators";
          break;
        case "3-2":
          page = "user";
          break;
        default:
          return;
      }
      
      var url = "/option/" + this.userName + "/" + page;
      LocalData.methods.obtainData(page).then((ret) => {
        console.info(ret)
        if (ret != undefined) {
          this.$router.push(url);
        } else {
          ElMessage({
            showClose: true,
            message: "获取数据失败",
            type: "error",
          });
        }
      });
    },
  },
  setup() {},
});
</script>